<template>
  <div class="book-container">
    <div class="search-view">
      <div style="display: flex;align-items: center;margin-left: 10px;">
        <img style="width: 17px;height: 19px;" src="@/assets/charpter/icon.png">
        <span>专项类别列表</span>
      </div>
      <div style="margin-right: 20px;">
        <el-input v-model="queryParams.categoryName" size="large" @keyup.enter.native="handleQuery" style="width: 315px" placeholder="请输入想要搜索的专项类别"
          :prefix-icon="Search" />
      </div>
    </div>
    <div class="list-view">
      <BookItem v-for="item in categorys" :key="item.categoryId" :item="item" @add="handleAddTest(item)"
        @test="handleBeginTest(item)" @update="handleUpdate(item)" @del="handleDelete(item)"  @detail="handleGotoDetail(item)"></BookItem>
      <AddBookItem @add="handleAddcategory(item)"/>
    </div>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" @pagination="getList" />

    <!-- 添加或修改录播观看对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="couseTimeRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="专项类别名称" prop="categoryName">
          <el-input v-model="form.categoryName" placeholder="请输入专项类别名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="CouseTime">
import BookItem from '@/components/zxBookItem'
import AddBookItem from '@/components/addBookItem'
import { Search } from '@element-plus/icons-vue'
import { categoryList, addcategory, updatecategory, delcategory } from '@/api/course/ztlb'
import { useRouter } from 'vue-router'
const router = useRouter()
const { proxy } = getCurrentInstance();
const categorys = ref([])

const open = ref(false);
const loading = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    categoryName: null
  },
  rules: {
    categoryName: [
      { required: true, message: "请输入", trigger: "blur" }
    ]
  }
});

const { queryParams, form, rules } = toRefs(data);
/** 查询录播观看列表 */
function getList() {
  loading.value = true;
  categoryList(queryParams.value).then(response => {
    categorys.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
// 习题列表
const handleAddTest = (item) => {
  router.push({
    path: '/practise',
    query:{
      typeId: item.categoryId,
      practiseType: 'z',
      showAdd: '1'
    }
  })
  
}
// 习题列表
const handleBeginTest = (item) => {
  console.log("🚀 ~ handleGotoDetail ~ item:", item)
}
// 习题列表
const handleGotoDetail = (item) => {
  console.log("🚀 ~ handleGotoDetail ~ item:", item)
  router.push({
    path: '/practise',
    query:{
      typeId: item.categoryId,
      practiseType: 'z'
    }
  })
}
/** 新增按钮操作 */
function handleAddcategory() {
  reset();
  open.value = true;
  title.value = "添加专项类别";
}
/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  form.value = Object.assign({}, row)
  open.value = true;
  title.value = "修改专项类别";
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["couseTimeRef"].validate(valid => {
    if (valid) {
      if (form.value.categoryId != null) {
        updatecategory(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addcategory(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _categoryIds = row.categoryId;
  proxy.$modal.confirm('是否确认删除该专项类别？').then(function () {
    return delcategory(_categoryIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => { });
}
// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    courseId: null,
    categoryName: null
  };
  proxy.resetForm("couseTimeRef");
}
getList()
</script>
<style lang='scss' scoped>
@import './index.scss'
</style>